<template>
  <div>
    <Content>
      <div class="shangpin">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in imgs" :key="item.id">
            <img :src="item" alt />
          </van-swipe-item>
        </van-swipe>
        <div v-for="item in listinfo" :key="item.id">
          <p>{{ item.characteristic }}</p>
          <!-- <p>{{ item.numberSells }}</p> -->
        </div>
        <div class="shop_container">
          <button
            :class="this.isaaa == 0 ? 'yangshi' : ''"
            @click="changIndex(0)"
          >
            商品介绍
          </button>
          <button
            :class="this.isaaa == 1 ? 'yangshi' : ''"
            @click="changIndex(1)"
          >
            商品评价
          </button>
        </div>
        <div v-html="text" v-if="!this.isaaa" class="xinxi"></div>

        <div class="evaluation_container">
          <div v-for="(item, index) in evaluation" :key="index">
            <div class="pingjia_container">
              <div>
                <img :src="item.goods.pic" alt="" class="iimg" />
              </div>
              <div>
                <div class="nick_name">{{ item.user.nick }}</div>
                <div class="goodReputationStr">
                  {{ item.goods.goodReputationStr }}
                </div>
                <div class="goodReputationRemark">
                  {{ item.goods.goodReputationRemark }}
                </div>
                <div class="dateReputation">
                  {{ item.goods.dateReputation }}
                </div>
                <div class="property">{{ item.goods.property }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="onClickIcon"
        />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="onClickButton"
        />
      </van-goods-action>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
        <van-swipe-cell>
          <van-card
            :price="listinfo.basicInfo.numberSells"
            desc="描述信息"
            :title="listinfo.basicInfo.name"
            :thumb="list.pic"
          >
            <template #footer> <van-stepper v-model="value" /></template>
          </van-card>
          <button @click="onAddCartClicked">加入购物车</button>
          <!-- <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template> -->
        </van-swipe-cell>
      </van-popup>
    </Content>
  </div>
</template>

<script>
import "../css/aa.css";
import Content from "../components/content/Content";
import mixin from "../store/mixin"
export default {
  mixins:[mixin],
  components: {
    Content,
  },
  data() {
    return {
      listinfo: [],
      imgs: [],
      show: false,
      list: [],
      isaaa: 0,
      evaluation: [],
      value: 0,
    };
  },
  mounted() {
    this.$APIClient
      .shoplist({
        params: { id: this.$route.query.id },
      })
      .then((res) => {
        // console.log(res);
        // console.log(this.$route.query.id);
        // console.log(res.data.data);
        this.imgs = res.data.data.pics2;
        this.listinfo = res.data.data;
        this.list = res.data.data.basicInfo;
        this.text = res.data.data.content;
      });
    this.$APIClient
      .ping({ params: { goodsId: this.$route.query.id } })
      .then((res) => {
        // console.log(res);
        this.evaluation = res.data.data;
      });
  },
  methods: {
    onClickIcon() {
      // console.log(id);
      this.$router.pushRouteByQuery("/ShopCar");
    },

    changIndex(index) {
      this.isaaa = index;
    },

    onClickButton() {
      this.show = true;
    },

    onAddCartClicked() {
        this.plus(this.list)
      console.log(this.list);

      // var token = localStorage.getItem("token");
      // if (token) {
      //   var objCart = {
      //     pic: this.listinfo.basicInfo.pic,
      //     name: this.listinfo.basicInfo.name,
      //     price: this.listinfo.basicInfo.originalPrice,
      //     num: this.value,
      //     checked: false,
      //     id: this.listinfo.basicInfo.id,
      //   };

      //   this.$store.dispatch("getAddCart", objCart);
      //   this.$router.push({ path: "/ShopCar", query: { item: objCart } });

      //   // this.$SetLoca.setData('ShopCar',objCart)
      // } else {
      //   this.$router.push("/login");
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.van-swipe-item {
  width: 100%;
  height: 17rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.xinxi {
  width: 100vw;
  // background-color: red;
  overflow: hidden;
}
.shop_container  {
  width: 100% !important;
  height: 6rem;
}
.shop_container button  {
  width: 100%;
  border: 0px;
}
.yangshi  {
  border-bottom: 5px solid red !important;
  text-align: center;
}
.shangpin {
  width: 100vw;
}
.iimg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.pingjia_container {
  width: 100%;
  height: 6rem;
  border-bottom: 1px solid lightgray;
  display: inline-flex;
  align-items: center;
}
</style>